<template>
  <view class="w-[750rpx] min-h-screen bg-gradient-to-b from-blue-50 to-white">
    <!-- Header -->
    <view class="bg-white px-[32rpx] py-[48rpx] shadow-sm">
      <view class="text-center">
        <text class="text-[48rpx] font-bold text-gray-800 block">欢迎使用</text>
        <text class="text-[28rpx] text-gray-500 mt-[16rpx]">多级导航演示应用</text>
      </view>
    </view>

    <!-- Main Navigation -->
    <view class="p-[32rpx]">
      <view class="bg-white rounded-[24rpx] p-[32rpx] shadow-lg">
        <text class="text-[32rpx] font-bold text-gray-800 block mb-[32rpx]">主要功能</text>
        
        <view class="space-y-[24rpx]">
          <view 
            class="flex items-center justify-between p-[24rpx] bg-gradient-to-r from-blue-500 to-blue-600 rounded-[16rpx]"
            @click="navigateToMedicalHistory"
          >
            <view class="flex items-center">
              <view class="w-[80rpx] h-[80rpx] bg-white bg-opacity-20 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
                <IconFont name="home" size="32" class="text-white" />
              </view>
              <view>
                <text class="text-[32rpx] font-bold text-white block">既往病史</text>
                <text class="text-[24rpx] text-blue-100 mt-[4rpx]">用户即往病史记录</text>
              </view>
            </view>
            <IconFont name="right" size="20" class="text-white" />
          </view>

          <view 
            class="flex items-center justify-between p-[24rpx] bg-gradient-to-r from-green-500 to-green-600 rounded-[16rpx]"
            @click="navigateToCategory1"
          >
            <view class="flex items-center">
              <view class="w-[80rpx] h-[80rpx] bg-white bg-opacity-20 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
                <IconFont name="category" size="32" class="text-white" />
              </view>
              <view>
                <text class="text-[32rpx] font-bold text-white block">分类一</text>
                <text class="text-[24rpx] text-green-100 mt-[4rpx]">查看分类功能</text>
              </view>
            </view>
            <IconFont name="right" size="20" class="text-white" />
          </view>

          <view 
            class="flex items-center justify-between p-[24rpx] bg-gradient-to-r from-purple-500 to-purple-600 rounded-[16rpx]"
            @click="navigateToCategory2"
          >
            <view class="flex items-center">
              <view class="w-[80rpx] h-[80rpx] bg-white bg-opacity-20 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
                <IconFont name="search" size="32" class="text-white" />
              </view>
              <view>
                <text class="text-[32rpx] font-bold text-white block">分类二</text>
                <text class="text-[24rpx] text-purple-100 mt-[4rpx]">搜索和筛选功能</text>
              </view>
            </view>
            <IconFont name="right" size="20" class="text-white" />
          </view>
        </view>
      </view>

      <!-- Quick Access -->
      <view class="mt-[32rpx] bg-white rounded-[24rpx] p-[32rpx] shadow-lg">
        <text class="text-[32rpx] font-bold text-gray-800 block mb-[32rpx]">快速访问</text>
        
        <view class="grid grid-cols-2 gap-[24rpx]">
          <view 
            class="bg-orange-50 p-[24rpx] rounded-[16rpx] text-center"
            @click="navigateToSub11"
          >
            <IconFont name="list" size="32" class="text-orange-500 mb-[16rpx]" />
            <text class="text-[28rpx] font-bold text-gray-800 block">子功能 1-1</text>
            <text class="text-[24rpx] text-gray-500 mt-[8rpx]">多标签页面</text>
          </view>

          <view 
            class="bg-pink-50 p-[24rpx] rounded-[16rpx] text-center"
            @click="navigateToSub12"
          >
            <IconFont name="edit" size="32" class="text-pink-500 mb-[16rpx]" />
            <text class="text-[28rpx] font-bold text-gray-800 block">子功能 1-2</text>
            <text class="text-[24rpx] text-gray-500 mt-[8rpx]">表单页面</text>
          </view>
        </view>
      </view>

      <!-- Info Card -->
      <view class="mt-[32rpx] bg-gradient-to-r from-gray-100 to-gray-200 rounded-[24rpx] p-[32rpx]">
        <view class="text-center">
          <IconFont name="info" size="48" class="text-gray-600 mb-[16rpx]" />
          <text class="text-[28rpx] font-bold text-gray-800 block">应用说明</text>
          <text class="text-[24rpx] text-gray-600 mt-[16rpx] leading-relaxed">
            这是一个基于 Taro + Vue3 + NutUI 的多级导航演示应用，
            展示了不同类型的页面结构和交互方式。
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

const navigateToMedicalHistory = () => {
  Taro.navigateTo({
    url: '/pages/info/medical-history/index',
    success: () => {
      Taro.showToast({
        title: '进入既往病史',
        icon: 'success',
        duration: 1500
      })
    }
  })
}

const navigateToMain = () => {
  Taro.navigateTo({
    url: '/pages/info/health/index',
    success: () => {
      Taro.showToast({
        title: '进入主页面',
        icon: 'success',
        duration: 1500
      })
    }
  })
}

const navigateToCategory1 = () => {
  Taro.navigateTo({
    url: '/views/category1',
    success: () => {
      Taro.showToast({
        title: '进入分类一',
        icon: 'success',
        duration: 1500
      })
    }
  })
}

const navigateToCategory2 = () => {
  Taro.navigateTo({
    url: '/views/category2',
    success: () => {
      Taro.showToast({
        title: '进入分类二',
        icon: 'success',
        duration: 1500
      })
    }
  })
}

const navigateToSub11 = () => {
  Taro.navigateTo({
    url: '/views/sub1-1',
    success: () => {
      Taro.showToast({
        title: '进入子功能 1-1',
        icon: 'success',
        duration: 1500
      })
    }
  })
}

const navigateToSub12 = () => {
  Taro.navigateTo({
    url: '/views/sub1-2',
    success: () => {
      Taro.showToast({
        title: '进入子功能 1-2',
        icon: 'success',
        duration: 1500
      })
    }
  })
}
</script>